<!DOCTYPE html>
<html>
<head>
    <title>前后端分离示例</title>
    <style>
        body {
            font-family: Arial;
            text-align: center;
            padding: 20px;
        }
        #timestamp {
            font-size: 24px;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Hello</h1>
    <div>当前时间戳：<span id="timestamp">-</span></div>

    <script>
        // 定时更新函数
        function updateTimestamp() {
            fetch('/api/timestamp')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('timestamp').textContent = data.timestamp;
                })
                .catch(error => console.error('请求失败:', error));
        }

        // 页面加载后启动定时器
        document.addEventListener('DOMContentLoaded', () => {
            updateTimestamp();  // 立即执行一次
            setInterval(updateTimestamp, 1000);  // 每秒刷新
        });
    </script>
</body>
</html>